<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-breadBar v-if='isShowBread'></v-breadBar>
		<div class="sub-content">
			<v-sidebar></v-sidebar>
			<div class="content-box">
			    <transition name="move" mode="out-in">
					<router-view></router-view>
				</transition>
				<!-- <v-footer></v-footer> -->
			</div>
		</div>
    </div>
</template>

<script>
import vHead from '@/components/Header.vue';
import vSidebar from '@/components/Sidebar.vue';
import vBreadBar from '@/components/BreadBar.vue';
import vFooter from '@/components/Footer.vue';
export default {
    components: {
        vHead,
        vSidebar,
		vBreadBar,
		vFooter
    },
	data() {
		return {
			isShowBread:false,
			showBreadList:[
				"/computing-detail"
			]
		};
	},
	
	watch:{
		$route:{
			handler:function(newV,oldV){
				const path = newV.path;
				this.isShowBread = this.showBreadList.includes(path) ? true :false
			},
			deep:true,
			immediate:true
		}
	}
};
</script>

<style lang="scss" scoped>
	.wrapper{
		width: 100%;
		height:100%;
		background: url('../assets/img/bg.png') no-repeat center center;
		background-size: 100% 100%;
		box-sizing: border-box;
		.sub-content{
			display: flex;
			justify-content: space-between;
			height: calc(100vh - 92px);
			.content-box {
				// max-width: calc(100% - 200px);
				// height: calc(100vh - 92px);
			    // position: absolute;
			    // right: 0;
			    // left: 200px;
			    // top: 92px;
			    // bottom: 0;
				width:calc(100% - 201px);
				height: 100%;
				// margin-bottom: 15px;
				border-radius: 5px 5px 5px 5px;
			    -webkit-transition: left 0.3s ease-in-out;
			    transition: left 0.3s ease-in-out;
			    background: #FFFFFF;
			    padding: 20px 30px;
			    box-sizing: border-box;
			    overflow-y: auto;
			}
		}
	}

</style>
